<template>
  <div class="detail_container">
    <div class="head_title" v-if="!detailForm.studentId">创建单</div>
    <div class="head_title" v-else-if="detailForm.studentId && isEdit">编辑单</div>
    <div class="head_title" v-else-if="detailForm.studentId && !isEdit">查看单</div>
    <el-divider></el-divider>
    <div class="px-20">
      <el-form :model="params" :disabled="detailForm.studentId && !isEdit" ref="expertForm" class="divForm" label-width="75px" :rules="rules" label-position="left" size="small">


        <el-row :gutter="15">
          <el-col :lg="8" :xl="6">
            <el-form-item label="所属班级ID" prop="classesId">
              <el-input v-model="params.classesId" placeholder="请输入所属班级ID" />
            </el-form-item>
          </el-col>



          <el-col :lg="8" :xl="6">
            <el-form-item label="学生名称" prop="studentName">
              <el-input v-model="params.studentName" placeholder="请输入学生名称" />
            </el-form-item>
          </el-col>
        </el-row>



        <el-row :gutter="15">
          <el-col :lg="8" :xl="6">
            <el-form-item label="年龄" prop="studentAge">
              <el-input v-model="params.studentAge" placeholder="请输入年龄" />
            </el-form-item>
          </el-col>



          <el-col :lg="8" :xl="6">
            <el-form-item label="性别" prop="studentSex">
              <el-select v-model="params.studentSex" placeholder="请选择性别" style="width: 100%;" >
                <el-option
                  v-for="dict in dict.type.sys_user_sex"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>



        <el-row :gutter="15">
          <el-col :lg="8" :xl="6">
            <el-form-item label="生日" prop="studentBirthday">
              <el-date-picker clearable
                              v-model="params.studentBirthday"
                              type="date"
                              value-format="yyyy-MM-dd"
                              placeholder="请选择生日">
              </el-date-picker>
            </el-form-item>
          </el-col>





          <el-col :lg="8" :xl="6">
            <el-form-item label="备注" prop="remark">
              <el-input v-model="params.remark" type="textarea" placeholder="请输入内容" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="flex p-20">
      <el-button @click="sureForm('expertForm')" type="primary" v-if="!detailForm.studentId || isEdit">确认提交</el-button>
      <el-button @click="isEdit = true" type="primary" v-if="detailForm.studentId && !isEdit">编辑</el-button>
      <el-button @click="show = false">返回</el-button>
    </div>
  </div>
</template>

<script>
export default{
  dicts: ['sys_user_sex'],
  data () {
    return {
      params:{
        studentId:'',
        classesId:'',
        studentName:'',
        studentAge:'',
        studentSex:'',
        studentBirthday:'',
        status:'',
        createBy:'',
        createTime:'',
        updateBy:'',
        updateTime:'',
        delFlag:'',
        remark:'',
      },
      rules: {
        studentName: [
          { required: true, message: "学生名称不能为空", trigger: "blur" }
        ],
        studentAge: [
          { required: true, message: "年龄不能为空", trigger: "blur" }
        ],
        studentSex: [
          { required: true, message: "性别不能为空", trigger: "change" }
        ],
      }
    }
  },
  props: {
    editVisible: {
      type: Boolean,
      default: () => {
        return false
      }
    },
    detailForm: {
      type: Object,
      default: () => {
        return {}
      }
    },
    isEdit:{
      type:Boolean,
      default:()=>{
        return false
      }
    },
  },
  watch:{

  },
  computed: {
    show: {
      get () {
        return this.editVisible
      },
      set (val) {
        this.$emit('update:editVisible', val)
      }
    },
  },
  created () {
    if(this.detailForm.studentId){
      this.params = {...this.detailForm}
    }
  },
  methods: {
    // 确认
    sureForm(formName) {
      this.$refs [formName].validate((valid) => {
        if (valid) {
          if(this.detailForm.studentId){
            this.$emit('submitForm', this.params,this.detailForm.studentId)
          }else{
            this.$emit('submitForm', this.params)
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });

    },
  }

}
</script>

<style scoped="scoped" lang="scss">
.titile_txt{
  font-family: Source Han Sans SC, Source Han Sans SC;
  font-weight: bold;
  font-size: 16px;
  color: #333333;
  line-height: 19px;
  margin-bottom: 15px;
}
</style>
